<template>
    <div>
        <div class="margin-top">
            <el-form :model="formData" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="年份" prop="year">
                    <el-date-picker v-model="year" type="year" placeholder="选择年" value-format="yyyy" @change="changeYear"></el-date-picker>
                </el-form-item>                                 
                <el-form-item label="金额" prop="amount">
                    <el-input v-model="formData.amount" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"></el-input>
                </el-form-item>                          
                <el-form-item label="增长率" prop="growth_rate">
                    <el-input v-model="formData.growth_rate" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"></el-input>
                </el-form-item>
                <el-form-item label="增长率变化" prop="change_rate">
                    <el-input v-model="formData.change_rate" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"></el-input>
                </el-form-item>                                        
                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: "BusinessEdit",
    data() {
        return {
            year:'',      
            formData: {
                amount:'',
                year:'',
                growth_rate:'',
                change_rate:'',
            },
            rules: {
                year: [
                    { required: true},
                ],
                amount: [
                    { required: true}
                ],
                change_rate: [
                    { required: true, message: '请填写'}
                ],  
                growth_rate: [
                    { required: true, message: '请填写'}
                ],      
            },           
        }
    },
    created() {
        this.formData.id = this.$route.params.id
    },
    mounted() {
        this.getDetail();
    },
    methods:{
        getDetail(){
            let _this = this;
            this.$http.httpPost({
                url:'/api/business/show',
                datas:{id:this.formData.id},
                success(res){
                    _this.formData.id = res.id;
                    
                    _this.formData.year = res.year;
                    _this.formData.amount = res.amount;
                    _this.formData.change_rate = res.change_rate;
                    _this.formData.growth_rate = res.growth_rate;
                    _this.year = new Date(res.year,1,1);           
                }
            })
        },
        create() {
            let _this = this;
            this.$http.httpPost({
                url:'/api/business/update',
                datas:this.formData,
                success(res){
                    console.log(res);
                    _this.$utils.success('成功！');
                    _this.$router.replace({path:'/business'});
                }
            })
        },
        changeYear(year) {
            this.formData.year = year;
        },         
        submitForm(formName) {
            //存在回调的方法，因为回调外和回调内的作用域不一致，所以务必为 _this 复制 this，否则在回调中无法访问this对象
            let _this = this;
            console.log(this.formData);
            //通过传递form表单ref名称，来调用表单的validate方法
            this.$refs[formName].validate((valid) => {
                //为true时验证通过
                if (valid) {
                    _this.create();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$utils.message('清空');
            this.$refs[formName].resetFields();
        }
    }
}
</script>
